<div class="module-content module-vertical" *ngIf="object">
    <div class="module-header">
        <div class="module-header-title">
            <nz-breadcrumb>
                <nz-breadcrumb-item>
                    <a [routerLink]="'list'">产品列表</a>
                </nz-breadcrumb-item>
                <nz-breadcrumb-item>
                    产品信息
                </nz-breadcrumb-item>
            </nz-breadcrumb>
        </div>
    </div>
    <div class="module-body module-body-row">
        <nz-tabset>
            <nz-tab nzTitle="基础信息">
                <div class="panel" style="margin-bottom: 0px;">
                    <div class="panel-body">
                        <div class="grid-auto-row" style="grid-row-gap: 5px;">
                            <div class="grid-column-3" style="grid-row-gap: 5px;">
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">产品名称</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="name" type="text" [(ngModel)]="object.name" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">产品大类</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                        <nz-select type="text" name="type1" [(ngModel)]="object.catalog" required [compareWith]="compareElement">
                                            <nz-option *ngFor="let type of customService.product.catalogs" [nzValue]="type" [nzLabel]="type.name"></nz-option>
                                        </nz-select>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">产品小类</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                        <nz-select type="text" name="type2" [(ngModel)]="object.category" required [compareWith]="compareElement">
                                            <nz-option *ngFor="let type of object.catalog?.children" [nzValue]="type" [nzLabel]="type.name"></nz-option>
                                        </nz-select>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">产品型号</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="model" type="text" [(ngModel)]="object.model" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">货架号</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="shelf" type="text" [(ngModel)]="object.shelf" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">成本价</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="cost" type="number" [(ngModel)]="object.cost" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">数量</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="amount" type="number" [(ngModel)]="object.amount" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">市场价</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="price" type="number" [(ngModel)]="object.price" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">优惠价</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="price1" type="number" [(ngModel)]="object.price1" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">VIP价</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="price2" type="number" [(ngModel)]="object.price2" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="6">底价</nz-form-label>
                                    <nz-form-control [nzSpan]="18">
                                       <input nz-input name="price3" type="number" [(ngModel)]="object.price3" autocomplete="off" required>
                                    </nz-form-control>
                                </nz-form-item>
                            </div>
                            <nz-form-item>
                                <nz-form-label [nzSpan]="2">产品描述</nz-form-label>
                                <nz-form-control [nzSpan]="22">
                                    <textarea nz-input name="description" [(ngModel)]="object.description" rows="3" autocomplete="off"></textarea>
                                </nz-form-control>
                            </nz-form-item>  
                        </div>
                    </div>
                </div>
                <nz-divider></nz-divider>    
                <div class="panel" style="margin-bottom: 0px;">
                    <div class="panel-body">                    
                        <app-picture-upload [editable]="true" [pictures]="object.pictures" (onChange)="onPictureChange($event)"></app-picture-upload>
                    </div>
                </div>
            </nz-tab>
            <nz-tab nzTitle="销售信息">
                <div class="list sell-list" style="height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-gap: 10px;">
                    <div class="list-header">
                        <div class="operate">
                            <nz-form-item>
                                <nz-form-label [nzSpan]="8">起止日期</nz-form-label>
                                <nz-form-control [nzSpan]="16">
                                    <nz-range-picker [(ngModel)]="option.sell.range" (ngModelChange)="changeSellDate($event)" [nzAllowClear]="false"></nz-range-picker>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item>
                                <nz-form-label [nzSpan]="8">支付状态</nz-form-label>
                                <nz-form-control [nzSpan]="16">
                                    <nz-select style="width: 100%;" [(ngModel)]="option.sell.paid" (ngModelChange)="filterSell()">
                                        <nz-option [nzValue]="'all'" [nzLabel]="'全部'"></nz-option>
                                        <nz-option [nzValue]="true" [nzLabel]="'已支付'"></nz-option>
                                        <nz-option [nzValue]="false" [nzLabel]="'未支付'"></nz-option>
                                    </nz-select>
                                </nz-form-control>
                            </nz-form-item>
                            <div></div>
                
                            <nz-input-group [nzSuffix]="suffixIconSearch">
                                <input type="text" nz-input placeholder="搜索订单编号" name="keyword" [(ngModel)]="option.sell.keyword" (ngModelChange)="filterSell()"/>
                            </nz-input-group>
                            <ng-template #suffixIconSearch>
                                <i nz-icon nzType="search"></i>
                            </ng-template>
                       
                        </div>
                    </div>
                    <div class="list-body" style="overflow: auto;">
                        <nz-empty *ngIf="!_sells || _sells.length == 0"></nz-empty>
                        <div class="list-grid-item" *ngFor="let item of sell_page">
                            <img class="list-grid-item-image" [src]="item.product.pictures && item.product.pictures.length > 0 ? configService.api.download_api + '/' + item.product.pictures[0].auto_name : 'assets/img/default/dummy.png'"/>
                            <div class="list-grid-item-text">
                                <span class="list-grid-item-name">{{item.product.name}}</span>
                                <span class="list-grid-item-code text-primary">编码 {{item.product.code}}</span>
                                <span class="list-grid-item-code">订单编号 {{item.code}}</span>
                            </div>
                            <span> {{item.customer.name}} </span>
                            <span> {{item.customer.phone}} </span>
                            <span> {{item.date | date: 'yyyy-MM-dd HH:mm:ss'}} </span>
                            <span class="list-grid-item-price text-danger"> 单价:{{item.price}} </span>
                            <span class="list-grid-item-count"> 数量:{{item.amount}} </span>
                            <span class="list-grid-item-sum text-danger"> 小计:{{item.price * item.amount}} </span>
                            <!-- <label class="label label-lg" [ngClass]="{'label-success': item.paid, 'label-danger': !item.paid}">{{item.paid ? "已支付" : "未支付"}}</label> -->
                            <nz-tag nzColor="error" *ngIf="!item.paid">未支付</nz-tag>
                            <nz-tag nzColor="success" *ngIf="item.paid">已支付</nz-tag>
                        </div>
                    </div>
                    <div class="list-footer" style="display: grid; padding: 10px 20px; grid-template-columns: 1fr auto; grid-gap: 10px; ">
                        <nz-pagination style="justify-self: end;" [(nzPageIndex)]="option.sell.current" [nzTotal]="sells.length" (nzPageIndexChange)="filterSell()"></nz-pagination>
                        <span class="text-danger" style="font-size: 28px;"> 总计: {{totalSell()}} </span>
                    </div>
                </div> 
            </nz-tab>
        </nz-tabset>
    </div>
    <div class="module-footer">
        <div class="module-footer-left">
            <button nz-button nzType="primary" nzDanger (click)="delete()">删除</button>
        </div>
        <div class="module-footer-right">
            <button nz-button nzType="default" (click)="cancel()">返回</button>
            <button nz-button nzType="primary" (click)="save()">保存</button>
        </div>
    </div>
</div>


